import React from 'react'
import PropTypes from 'prop-types'
import { Table, Modal } from 'antd'
import classnames from 'classnames'
import { DropOption } from 'components'
import { Link } from 'react-router-dom'
import queryString from 'query-string'
import styles from './List.less'
import { SysUserState } from 'utils/enums'

const confirm = Modal.confirm

const List = ({ onDeleteItem, onResetPassword, onStartAccout, onStopAccout,  onEditItem, location, ...tableProps }) => {
  location.query = queryString.parse(location.search)

  const handleMenuClick = (record, e) => {
    switch (e.key)
    { case '1':
        onEditItem(record)
        break
      case '2':
        confirm({
          title: 'Are you sure delete this record?',
          onOk () {
            onDeleteItem(record.id)
          },
        })
        break
      case '3':
        confirm({
          title: 'Are you sure reset password?',
          onOk () {
            onResetPassword(record.id)
          },
        })
        break
      case '4':
        confirm({
          title: 'Are you sure start accout?',
          onOk () {
            onStartAccout(record.id)
          },
        })
        break
      case '5':
        confirm({
          title: 'Are you sure stop accout?',
          onOk () {
            onStopAccout(record.id)
          },
        })
        break
      default:
    }
  }
  const createMenuData = (record) => {
    let data = [
      { key: '1', name: 'Update' },
      { key: '2', name: 'Delete' },
      { key: '3', name: 'ResetPass' },
    ]
    if (record.status === SysUserState.USER_UNVALID) {
      data.push({ key: '4', name: 'StartAccout' })
    } else {
      data.push({ key: '5', name: 'StopAccout' })
    }
    return data
  }


  const columns = [
    {
      title: 'UserName',
      dataIndex: 'username',
      key: 'username',

    },
    {
      title: 'NickName',
      dataIndex: 'nickname',
      key: 'nickname',
    },
    {
      title: 'Sex',
      dataIndex: 'sex',
      key: 'sex',
      render: (text, record) => {
        if (record.sex === 'M') {
          return 'Male'
        } else {
          return 'Female'
        }
      },
    },
    {
      title: 'Telephone',
      dataIndex: 'telephone',
      key: 'telephone',
    },
    {
      title: 'Birthday',
      dataIndex: 'birthday',
      key: 'birthday',
    },
    {
      title: 'Email',
      dataIndex: 'email',
      key: 'email',
    },
    {
      title: 'Status',
      dataIndex: 'status',
      key: 'status',
      render: (text, record) => {
        if (record.status === 1) {
          return 'T'
        } else {
          return 'F'
        }
      },
    }, {
      title: 'Operation',
      key: 'operation',
      width: 100,
      render: (text, record) => {
        return <DropOption onMenuClick={e => handleMenuClick(record, e)} menuOptions={createMenuData(record)} />
      },
    },
  ]


  return (
    <div>
      <Table
        {...tableProps}
        className={classnames({ [styles.table]: true })}
        bordered
        scroll={{ x: 700 }}
        columns={columns}
        simple
        rowKey={record => record.id}
      />
    </div>
  )
}

List.propTypes = {
  onDeleteItem: PropTypes.func,
  onResetPassword: PropTypes.func,
  onStartAccout: PropTypes.func,
  onStopAccout: PropTypes.func,
  onEditItem: PropTypes.func,
  location: PropTypes.object,
}

export default List
